import "./index.scss";
import { useEffect, useRef, useState } from "react";

const TYPED_LIST = [
  "生产管理应用",
  "人事管理应用",
  "进销存应用",
  "设备管理应用",
];

export default function Banner({ playVideo }) {
  const [value, setValue] = useState("");
  const index = useRef(0);
  const type = useRef("");
  const typeRef = useRef();

  useEffect(() => {
    const timer = setInterval(() => {
      if (type.current.length === TYPED_LIST[index.current].length) {
        type.current = "";
        if (++index.current > TYPED_LIST.length - 1) {
          index.current = 0;
        }
      } else {
        type.current = TYPED_LIST[index.current].substring(
          0,
          type.current.length + 1
        );
      }
      typeRef.current.innerHTML = type.current;
    }, 300);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div className="banner">
      <div className="advertise-banner"></div>
      <div className="row">
        <div className="txt">
          <h2>零代码轻量级应用搭建平台</h2>
          <h3>
            5分钟创建一个
            <span id="typed" style={{ whiteSpace: "pre" }} ref={typeRef}></span>
            <span className="typed-cursor" aria-hidden="true">
              |
            </span>
          </h3>
          <div className="form">
            <input
              type="text"
              placeholder="请输入您的手机号"
              value={value}
              onChange={(e) => setValue(e.target.value)}
            />
            <input type="button" value="免费注册" />
          </div>
        </div>
        <div className="video-block">
          <div className="img pc">
            <img
              src="https://blog-assets.jiandaoyun.com/index/outsourcing/2020jdy-indexbannera.png"
              alt="零代码,零代码开发平台,无代码开发平台"
            />
          </div>
          <span
            className="video-btn"
            onClick={() =>
              playVideo("https://blog-assets.jiandaoyun.com/jdy_intro.mp4")
            }
          ></span>
        </div>
      </div>
    </div>
  );
}
